<template>
  <!--    新增窗口    -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="职位名称">
            <el-input placeholder="请输入职位名称"
                      v-model="savePositionParam.title"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作地址">
            <el-input placeholder="请输入工作地址"
                      v-model="savePositionParam.location"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="薪资范围">
            <el-input placeholder="请输入薪资范围"
                      v-model="savePositionParam.salary"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历要求">
            <el-select placeholder="请选择学历要求"
                       v-model="savePositionParam.education">
              <el-option label="不限" value="不限"/>
              <el-option label="大专" value="大专"/>
              <el-option label="本科" value="本科"/>
              <el-option label="硕士" value="硕士"/>
              <el-option label="博士" value="博士"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="截止时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="savePositionParam.endTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作城市">
            <el-input placeholder="请输入工作城市" v-model="savePositionParam.city"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="职位描述">
            <el-input type="textarea" placeholder="请输入职位描述" rows="5"
                      v-model="savePositionParam.description"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="岗位要求">
            <el-input type="textarea" placeholder="请输入岗位要求" rows="8"
                      v-model="savePositionParam.requirements"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="savePosition">确定</el-button>
    </template>
  </el-dialog>


  <el-card style="height: 12vh;background-color:#ffffff;padding:10px 20px;">
    <el-row :gutter="10">
      <el-col :span="18">
        <el-button type="primary"
                   style="float:left;" @click="beforeAddPosition">+ 发布职位</el-button>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请输入职位名称" v-model="queryParam.title"/>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="getAllPosition">搜索</el-button>
      </el-col>
    </el-row>
    <el-radio-group style="margin-top: 15px;" v-model="queryParam.status"
                    @change="getAllPosition">
      <el-radio-button value="" size="large">全部职位</el-radio-button>
      <el-radio-button value="1" size="large">开放中</el-radio-button>
      <el-radio-button value="0" size="large">已关闭</el-radio-button>
    </el-radio-group>
  </el-card>

  <el-card style="margin-top: 10px;background-color: #f5f7fa"
           v-for="(item, index) in positions" :key="index">
    <el-row :gutter="20">
      <el-col :span="12">
        <span style="font-size: 20px">{{item.title}}</span>
      </el-col>
      <el-col :span="6">
        <span>{{item.status}}</span>
      </el-col>
      <el-col :span="6" v-if="item.status === '开放中'">
        <el-button type="primary" size="mini"
                   @click="editPosition(item.id)">编辑</el-button>
        <el-button type="danger" size="mini"
                   @click="updatePositionStatus(item.id)">关闭</el-button>
      </el-col>
      <el-col :span="6" v-else>
        <el-button type="danger" size="mini"
                   @click="deletePosition(item.id)">删除</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
          <span style="font-size: 15px;color: #7f7f7f">
            &nbsp{{item.location}}&nbsp|
            &nbsp{{item.salary}}&nbsp|
            &nbsp{{item.education}}</span>
      </el-col>
      <el-col :span="3">
          <span style="font-size: 13px;color: #7f7f7f"
                v-if="item.status === '开放中'">
            {{item.endTime}}截止</span>
      </el-col>
    </el-row>
  </el-card>
</template>


<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const positions = ref([]);
const user = ref(getUser())
const queryParam = ref({
  status: '',
  title: ''
})
const dialogVisible = ref(false);
const dialogTitle = ref('新增职位');
const savePositionParam = ref({
  title: '',
  location: '',
  salary: '',
  education: '',
  endTime: '',
  city: '',
  description: '',
  requirements: '',
})


const getAllPosition = () => {
  queryParam.value.userId=user.value.id;
  let data = qs.stringify(queryParam.value)
  console.log("查询参数为：" + data);
  axios.get(BASEURL+'/employer/position/getAllPosition?'+data).then((response)=>{
    if (response.data.code===2000){
      console.log("获取职位成功:"+response.data.data);
      positions.value = response.data.data;
      for (let p of positions.value) {
        if (p.status === "1"){
          p.status = "开放中";
        }else {
          p.status = "已关闭";
        }
      }
      queryParam.value.title='';
    }else {
      ElMessage.error('获取职位失败!');
    }
  })
}


const savePosition = () => {
  savePositionParam.value.userId=user.value.id;
  let data = qs.stringify(savePositionParam.value)
  axios.post(BASEURL+'/employer/position/save',data).then((response)=>{
    if (response.data.code===2000){
      ElMessage.success('保存成功!!');
      dialogVisible.value = false;
      getAllPosition();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const editPosition = (id)=> {
  dialogVisible.value = true;
  dialogTitle.value = '修改职位';
  axios.get(BASEURL+'/employer/position/getPositionById?id='+id).then((response)=>{
    if (response.data.code===2000){
      savePositionParam.value = response.data.data;
    }else {
      ElMessage.error('获取职位失败!');
    }
  })
}


const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;//关闭弹窗
  }
}

const beforeAddPosition = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新增职位';
  savePositionParam.value = {}
}

const deletePosition = (id) => {
  if(confirm('您确认要删除本职位吗?')){
    axios.post(BASEURL+'/employer/position/delete/'+id).then((response)=>{
      if (response.data.code===2000){
        ElMessage.success('删除职位成功!');
        getAllPosition();
      }else {
        ElMessage.error('删除职位失败!');
      }
    })
  }
}

const updatePositionStatus = (id) => {
  axios.post(BASEURL+'/employer/position/updateStatus/'+id).then((response)=>{
    if (response.data.code===2000){
      ElMessage.success('关闭职位成功!');
      getAllPosition();
    }else {
      ElMessage.error('关闭职位失败!');
    }
  })
}

onMounted(()=>{
  getAllPosition();
})
</script>
